import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:rabbit_mobile/view/goods_details/models/goods_details_model.dart';
import 'package:rabbit_mobile/widget/custom_cache_image_widget/index.dart';
import 'package:rabbit_mobile/widget/price_Widget/index.dart';

class GoodsDetailsSimilar extends StatefulWidget {
  final List<GoodsDetailsSimilarProductsModel> similarProducts;
  final List<GoodsDetailsHotByDay> hotByDay;
  final TabController tabController;

  const GoodsDetailsSimilar({
    super.key,
    required this.hotByDay,
    required this.similarProducts,
    required this.tabController,
  });

  @override
  State<GoodsDetailsSimilar> createState() => _GoodsDetailsSimilarState();
}

class _GoodsDetailsSimilarState extends State<GoodsDetailsSimilar> with TickerProviderStateMixin {
  // 获取每个商品图片的宽度
  double _getImageWidth(BuildContext context) {
    return (MediaQuery.of(context).size.width - 100) / 3;
  }

  // 构建商品列表
  Widget _buildProductList<T>(
      {required List<T> products, required Widget Function(BuildContext, T) itemBuilder}) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: ListView.separated(
        scrollDirection: Axis.horizontal,
        shrinkWrap: false,
        physics: const NeverScrollableScrollPhysics(),
        itemCount: products.length,
        itemBuilder: (context, index) {
          return itemBuilder(context, products[index]);
        },
        separatorBuilder: (BuildContext context, int index) {
          return const SizedBox(width: 10);
        },
      ),
    );
  }

  // 构建相似商品项
  Widget _buildProductItem(BuildContext context, GoodsDetailsSimilarProductsModel product) {
    double imgWidth = _getImageWidth(context);
    return _buildItem(
        context, product.name, product.desc, product.picture, product.price, imgWidth);
  }

  // 构建每日热销商品项
  Widget _buildHotItem(BuildContext context, GoodsDetailsHotByDay product) {
    double imgWidth = _getImageWidth(context);
    return _buildItem(
        context, product.name, product.desc, product.picture, product.price, imgWidth);
  }

  // 构建商品展示项
  Widget _buildItem(
    BuildContext context,
    String name,
    String desc,
    String picture,
    String price,
    double imgWidth,
  ) {
    return Container(
      // height: 240,
      width: (MediaQuery.of(context).size.width - 40) / 3,
      margin: const EdgeInsets.only(top: 10),
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () {},
            child: SizedBox(
              width: imgWidth,
              height: imgWidth,
              child: CustomCacheImageWidget(imageUrl: picture),
            ),
          ),
          const SizedBox(height: 6),
          Text(
            name,
            style: const TextStyle(fontSize: 16),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
          const SizedBox(height: 6),
          Text(
            desc,
            style: const TextStyle(fontSize: 14, color: Colors.grey),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
          const SizedBox(height: 6),
          PriceWidget(price: price),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 10),
      width: double.infinity,
      height: 220,
      child: Expanded(
        child: TabBarView(
          controller: widget.tabController,
          children: [
            // 相似商品展示
            _buildProductList(
              products: widget.similarProducts,
              itemBuilder: (context, product) => _buildProductItem(context, product),
            ),
            // 每日热销商品展示
            _buildProductList(
              products: widget.hotByDay,
              itemBuilder: (context, product) => _buildHotItem(context, product),
            ),
          ],
        ),
      ),
    );
  }
}
